﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.4.2.js" type="text/javascript"></script>
    <link href="css/themes/default/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
    <script src="https://rawgithub.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script>
    <script id="mobile-datepicker" src="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script>
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="https://rawgithub.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.css" />
</head>
<body>
    <div data-role="page" data-title="查看列表" class="jqm-demos">
        <div data-role="header" data-position="fixed" data-theme="a">
            <a href="../" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">
                Back</a>
            <h1>
                Info</h1>
        </div>
        <a data-role="button" id="submit" data-position="fixed" data-theme="a">搜索</a>
        <script type="text/javascript">
            $(function () {
                var db = window.openDatabase("SugarDB", "1.0", "SugarDB", 5000000);
                db.transaction(queryDB, errorCB, successCB);
            });
            // 查询数据库
            function queryDB(tx) {
                var selectsql = "select * from DATABILL order by createtime desc";
                tx.executeSql(selectsql, [], querySuccess, errorCB);
            }
            // 查询成功后调用的回调函数
            function querySuccess(tx, results) {
                if (results.rows.length != 0) {
                    var time;
                    var psum;
                    for (var i = 0; i < results.rows.length; i++) {

                        var id = results.rows.item(i).id;
                        var name = results.rows.item(i).name;
                        var img = results.rows.item(i).img;
                        var createtime = results.rows.item(i).createtime;
                        var price = results.rows.item(i).price;
                        var details = results.rows.item(i).details;

                        var imgsrc = "img/boy.png";
                        if (img == 1) {
                            imgsrc = "img/girl.png";
                        }

                        if (createtime != time) {
                            //加入集合

                            psum = price;
                            var list = collapsibleappend(i, createtime, psum);
                            $("#list").append(list);
                            list = uiappend(name, imgsrc, price);
                            $("#listview" + Number).append(list);
                            time = createtime;
                        }
                        else {
                            psum += price;
                            var list = uiappend(name, imgsrc, price);
                            $("#listview" + Number).append(list);

                        }
                        //正确渲染div或其他： 添加.trigger( "create" );
                        //listview: 添加 jq(".detail").listview("refresh"); 

                    }
                    $("#list").trigger("create");
                    CountPrice();
                }
            }
            function CountPrice() {
                $("#list div[name=listview]").each(function () {
                    var listviewID = this.id;
                    var CountPrice = 0;
                    $("#" + listviewID + " b[name=Price]").each(function () {
                        //   alert(this.innerText);
                        CountPrice += parseFloat(this.innerText);
                    });
                    $("#" + listviewID + " span[name=CountPrice]").text(CountPrice + "元");
                });
            }
            var Number;
            $(document).ready(function () {//页面加载完毕
                Number = 0;
            });
            function collapsibleappend(i, createtime, sum) {
                Number++;
                var list = '<div id="listview' + Number + '" name="listview" data-role="collapsible" data-iconpos="left" data-corners="false"';
                if (i == 0) {
                    list += ' data-collapsed="false"';
                }
                list += '  >  <h2>  日期-->' + createtime + '<span class="ui-li-count" name="CountPrice" >' + sum + '元</span> </h2>';
                list += '</div>';
                return list;
            }
            function uiappend(name, imgsrc, price) {
                list = '  <ul data-role="listview" data-inset="true">';
                list += '<li><a href="#">';
                list += ' <img class="ui-li-icon ui-corner-none" alt="' + name + '" src="' + imgsrc + '">名称：' + name + '->价格：<b name=Price>' + price + '</b>元</a></li>  </ul> ';
                return list;
            }
            function errorCB(err) {
                console.log("错误处理的SQL：" + err.code + "错误信息：" + err.message);
                alert("错误信息：" + err.message);
            }
            // 事务执行成功后调用的回调函数
            function successCB() {
                // alert("查询数据执行成功");
            } 
        </script>
        <div data-role="content">
            <div data-role="collapsibleset" data-theme="a" id="list" data-inset="false">
            </div>
        </div>
    </div>
</body>
</html>
